<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <title>日志详情 - 废物回收管理系统</title>
    <th:block th:include="common/header :: header"/>
    <style>
        .log-type {
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 14px;
            display: inline-block;
            margin-bottom: 10px;
        }
        .log-type-login { background-color: #e6f7ff; color: #1890ff; }
        .log-type-operate { background-color: #f6ffed; color: #52c41a; }
        .log-type-error { background-color: #fff2f0; color: #ff4d4f; }
        .log-status-success { color: #52c41a; }
        .log-status-fail { color: #ff4d4f; }
        .detail-label {
            color: #666;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .detail-value {
            color: #333;
            margin-bottom: 15px;
            word-break: break-all;
        }
        pre {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- 标题 -->
        <div class="row mb-3">
            <div class="col">
                <h4>
                    <a href="/log/list" class="btn btn-link">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    日志详情
                </h4>
            </div>
        </div>

        <!-- 日志详情 -->
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <!-- 基本信息 -->
                    <div class="col-md-6">
                        <div class="detail-label">日志标题</div>
                        <div class="detail-value" th:text="${log.title}">-</div>

                        <div class="detail-label">日志类型</div>
                        <div class="detail-value">
                            <span th:class="'log-type log-type-' + ${#strings.toLowerCase(log.type)}"
                                  th:text="${log.type == 'LOGIN' ? '登录日志' : 
                                           log.type == 'OPERATE' ? '操作日志' : 
                                           log.type == 'ERROR' ? '异常日志' : log.type}">
                            </span>
                        </div>

                        <div class="detail-label">操作用户</div>
                        <div class="detail-value" th:text="${log.username}">-</div>

                        <div class="detail-label">操作状态</div>
                        <div class="detail-value">
                            <span th:class="'log-status-' + (${log.status == 1 ? 'success' : 'fail'})"
                                  th:text="${log.status == 1 ? '成功' : '失败'}">
                            </span>
                        </div>

                        <div class="detail-label">操作时间</div>
                        <div class="detail-value" 
                             th:text="${#temporals.format(log.operateTime, 'yyyy-MM-dd HH:mm:ss')}">-</div>

                        <div class="detail-label">耗时</div>
                        <div class="detail-value" th:text="${log.costTime + ' 毫秒'}">-</div>
                    </div>

                    <!-- 请求信息 -->
                    <div class="col-md-6">
                        <div class="detail-label">请求方法</div>
                        <div class="detail-value">
                            <span class="badge bg-primary" th:text="${log.requestMethod}">-</span>
                            <span th:text="${log.method}">-</span>
                        </div>

                        <div class="detail-label">请求地址</div>
                        <div class="detail-value" th:text="${log.requestUrl}">-</div>

                        <div class="detail-label">操作IP</div>
                        <div class="detail-value" th:text="${log.operateIp}">-</div>

                        <div class="detail-label">操作地点</div>
                        <div class="detail-value" th:text="${log.operateLocation}">-</div>

                        <div class="detail-label">操作浏览器</div>
                        <div class="detail-value" th:text="${log.browser}">-</div>

                        <div class="detail-label">操作系统</div>
                        <div class="detail-value" th:text="${log.os}">-</div>
                    </div>
                </div>

                <div class="row mt-3">
                    <!-- 请求参数 -->
                    <div class="col-md-6">
                        <div class="detail-label">请求参数</div>
                        <div class="detail-value">
                            <pre th:if="${log.requestParam}" th:text="${log.requestParam}">-</pre>
                            <span th:if="${log.requestParam == null}">-</span>
                        </div>
                    </div>

                    <!-- 返回结果 -->
                    <div class="col-md-6">
                        <div class="detail-label">返回结果</div>
                        <div class="detail-value">
                            <pre th:if="${log.responseResult}" th:text="${log.responseResult}">-</pre>
                            <span th:if="${log.responseResult == null}">-</span>
                        </div>
                    </div>
                </div>

                <!-- 错误信息 -->
                <div class="row mt-3" th:if="${log.errorMsg}">
                    <div class="col-12">
                        <div class="detail-label">错误信息</div>
                        <div class="detail-value">
                            <pre class="text-danger" th:text="${log.errorMsg}"></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 